<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

<script>
  console.log('VueRuntimeDOM:',VueRuntimeDOM)

  const {createApp,h,reactive,ref} = VueRuntimeDOM;

  const App = {
    props:{
      name:String
    },
    setup(props,context){
      const state = reactive({name: 'ahhh'});
      let flag = ref(true);

      const fn = function(){
        state.name = 'jim';
        state.name = 'jim2';
        state.name = 'jim3';
      }

      setTimeout(()=>{
        flag.value = false
      },2000)

      return (proxy)=>{

        // return h('div',{onClick:fn},state.name)
        return flag.value?
          /** case1 */
          // h('div',{style:{color:'red'}},state.name)
          // :h('p',{style:{color:'blue'}},state.name)
          //:h('div',{style:{color:'blue'}},state.name)

          /** case2 */
          // h('div',{style:{color:'red'}},[h('span','hello'),h('span','hello')]):
          // h('div',{style:{color:'blue'}},'ahhh')

          /** case3 */
          h('div',{style:{color:'red'}},[h('span','hello'),h('span','hello')]):
          h('div',{style:{color:'blue'}},h('span','hello'))
      }
    }
  }

  const app = createApp(App, {name:'ahhh',age:123})
  const p = app.mount('#app')
</script>
</body>
</html>
